<template>
  <div data-tauri-drag-region class="titlebar">
    <div class="titlebar-menu-wrapper flex-center">
      <div class="titlebar-menu flex-center">
        <!-- <i class="logo" @click="useMenu($event, true)"></i> -->
        <i class="logo"></i>
        <span class="title">{{ pkg.name }}</span>
      </div>
    </div>

    <div class="titlebar-button-wrapper">
      <div class="titlebar-button flex-center minimize" @click="handleClick('minimize')">
        <i class="iconfont icon-suoxiao"></i>
      </div>
      <div class="titlebar-button flex-center toggle" @click="handleClick('toggleMaximize')">
        <i class="iconfont" :class="isFull ? 'icon-3zuidahua-3' : 'icon-chuangkouzuidahua'"></i>
      </div>
      <div class="titlebar-button flex-center close" @click="handleClick('hide')">
        <i class="iconfont icon-guanbi1"></i>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { appWindow } from "@tauri-apps/api/window";
import pkg from "root/package.json";
import useMenu from "@/hook/useMenu";

const isFull = ref(false);

onMounted(async () => {
  isFull.value = await appWindow.isFullscreen();
});

const handleClick = async (flog: "minimize" | "toggleMaximize" | "close" | "hide") => {
  appWindow[flog]();
  isFull.value = await appWindow.isFullscreen();
  // isFull.value = !isFull.value;
};
</script>

<style lang="scss" scoped>
@import "@/styles/var.scss";

.titlebar {
  height: 30px;
  background: white;
  user-select: none;
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  border: 1px solid #bfbfbf;
  border-bottom-color: #efefef;
  overflow: hidden;
  cursor: move;

  .titlebar-menu-wrapper {
    padding-left: 6px;
    .titlebar-menu {
      .logo {
        width: 18px;
        height: 18px;
        display: inline-block;
        margin-right: 4px;
        background: green;
        border-radius: 4px;
      }
      .title {
        font-size: 12px;
      }
    }
  }

  .titlebar-button-wrapper {
    display: flex;
    .titlebar-button {
      width: 46px;
      height: 100%;

      transition: background 0.3s;
      cursor: pointer;

      &:hover {
        background: #b8b8b8;
      }
    }

    .minimize {
      i {
        font-size: 18px;
      }
    }

    .toggle {
      i {
        font-size: 12px;
        color: black;
      }
    }

    // .titlebar-button:last-child {
    .close {
      &:hover {
        background: red;
        color: white;
      }
    }
  }
}
</style>
